<template>
<div>

  <uploader :options="options" @file-added="onFileAdded" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>选择文件</uploader-btn>
<!--      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>-->
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>


</div>
</template>

<script>


import SparkMD5 from 'spark-md5';


export default {
  name: "ListView",
  data () {
    return {
      options: {
        target: 'http://localhost:8686/bigupload', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      },
      attrs: {
        accept: 'image/*'
      }
    }
  },
  methods:{
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    }
  }
}
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>